<template>
  <Row>
        <Col>
            <!-- 搜索框 -->
            <Input v-model="filter.name">
                <Button slot="append" icon="ios-search" @click="onSearch"></Button>
            </Input>
            <!-- 按钮 -->
            <Button type="sucess" @click="returnNew">返回新闻列表</Button>
            <Button type="primary" @click="onAdd">添加评论</Button>
            <Button type="error" @click="onDletes">删除数据</Button>
            <!-- list -->
            <Table border :columns="columns" :data="filter.commentList" @on-selection-change="onSlectionChange"></Table>
            <!-- page -->
            <Page :total="filter.total" size="small" 
            show-elevator show-sizer show-total
            @on-change="onChange"
            @on-page-size-change="onPageSizeChange"></Page>
            <!-- model -->
            <Modal 
                v-model="modal"
                title="数据操作">
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <FormItem label="用户" prop="name">
                        <Input v-model="formValidate.name" placeholder="请输入用户名"></Input>
                    </FormItem>
                    <FormItem label="评价" prop="content">
                        <!-- <Input v-model="formValidate.content" placeholder="请输入评论内容"></Input> -->
                        <quill-editor v-model="formValidate.content"></quill-editor>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                        <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                    </FormItem>
                </Form>
            </Modal>
        </Col>
    </Row>
</template>
<script>
import Quill from 'quill';
    export default {
        data(){
            return {
                modal: false,
                spanLeft: 3,
                spanRight: 21,
                formValidate: {
                    name: '',
                    content:'',
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '标题不能为空', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '内容不能为空', trigger: 'blur' }
                    ]
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '用户名',
                        key: 'name'
                    },
                    {
                        title: '评价',
                        key: 'content',
                        type:'html'
                    },
                    {
                        title: '日期',
                        key: 'date'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row._id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                ids:[],
                filter:{
                    commentList: [],
                    total:0,
                    page:1,
                    limit:10,
                    name:'',
                    newId:''
                }
            }
        },
        methods:{
            returnNew(){
                this.$router.push({path:'/news'});
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (this.formValidate._id && this.formValidate._id.length>0) {
                            this.$http.put(`http://10.31.153.35:3000/comments/data/${this.formValidate._id}`,this.formValidate)
                            .then(res=>{
                                this.$Message.success('修改成功!');
                                this.modal = false;
                                this.getList();
                            })
                        }else{
                            this.formValidate.newId = this.filter.newId;
                            this.$http.post(`http://10.31.153.35:3000/comments/data`,this.formValidate)
                            .then(res=>{
                                this.$Message.success('提交成功!');
                                this.modal = false;
                                this.getList();
                            })
                        }
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            onAdd(){
                this.modal = true ;
                // this.$option.data()取得初始化数据
                Object.assign(this.$data.formValidate,this.$options.data().formValidate);
                // 对象合并，初始化表单数据
            },
            onSlectionChange(selection){
                if (selection && selection.length>0) {
                    var ids = [];
                    let selectionlen = selection.length;
                    for(let i=0;i<selectionlen;i++){
                        ids.push(selection[i]._id);
                    }
                    this.ids = ids;
                }
            },
            onDletes(){
                // 确认对话框
                this.$Modal.confirm({
                    title: '确认删除数据',
                    content: '<p>确认删除该条信息吗？</p>',
                    onOk: () => {
                        this.$http.post(`http://10.31.153.35:3000/comments/deletes`,{ids:this.ids.toString()})
                        .then(res=>{
                            this.getList();
                            // this.getListSort();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('已取消');
                    }
                });
            },
            show (row) {
                this.modal = true ;
                Object.assign(this.$data.formValidate,row)
            },
            remove (id) {

                // 确认对话框
                this.$Modal.confirm({
                    title: '确认删除数据',
                    content: '<p>确认删除该条信息吗？</p>',
                    onOk: () => {
                        this.$http.delete(`http://10.31.153.35:3000/comments/data/${id}`)
                        .then(res=>{
                            this.$Message.info('删除成功');
                            this.getList();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('已取消');
                    }
                });
            },
            getList(){
                this.filter.newId = this.$route.params.id
                console.log(this.$route.params)
                this.$http.post('http://10.31.153.35:3000/comments/list',this.filter)
                .then(res=>{
                    this.filter.commentList = res.data.docs;
                    this.filter.total = res.data.total;
                    this.filter.page = res.data.page;
                })
            },
            getSelected(data){
                this.clickData = data
                this.getList();
                if(this.clickData.length>0){
                    this.getListSort();
                }
            },
            onChange(page){
                this.filter.page = page;
                this.getList();
            },
            onPageSizeChange(pageSize){
                this.filter.limit = pageSize;
                this.getList();
            },
            onSearch(){
                this.getList();
            }
        },
        computed: {
            iconSize () {
                return this.spanLeft === 5 ? 14 : 24;
            }
        },
        created(){
            // this.filter.newId = this.$route.params.id
            this.getList();
        }
    }
</script>
